import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    Dimensions
} from 'react-native';
let {width, height} = Dimensions.get('window');
import Constant from '../../js/Contant'
import Icon from 'react-native-vector-icons/Ionicons'
import {observer} from 'mobx-react/native'
import addressMgrStore from '../../js/store/AddrMgrStore'

/**
 * 页面顶部地址显示组件
 */

@observer
export default class AddressTopView extends Component{
    render(){
        var address=addressMgrStore.activeAddress.mappingAddress==null?'正在获取地址...':addressMgrStore.activeAddress.mappingAddress;
        return <View style={{flex:1}}>
            <View style={{flexDirection: 'row', alignItems: 'center',height:50}}>
                <View style={{flexDirection:'row', alignItems: 'center',flex:1}}>
                    <View style={{flexDirection: 'row', alignItems: 'center', marginLeft: 10, marginRight: 6}}>
                        <Image style={{width:12,height:16,resizeMode:'contain'}} source={require('../../asserts/common/station_details_icon_location.png')}/>
                        <Text style={{paddingLeft: 5, fontSize: 12,color:Constant.TEXTCONTENTCOLOR}}>收货区域：</Text>
                    </View>
                    <View style={{flexWrap:'wrap',width:width*0.7}}>
                        <Text numberOfLines={1} style={{color: 'gray', fontSize: 12}}>{address+''}</Text>
                    </View>
                </View>
                <View style={{ alignItems: 'center',marginRight:10}}>
                    <Icon name="ios-arrow-forward-outline" color="#cccccc" size={28}/>
                    </View>
            </View>
        </View>
    }
}